<template>
  <div class="box" style="height:100%;">
    <div class="index clearfix">
      <div class="form-area">
        <div class="form-title">发票种类</div>
        <div class="nuim-type">
          <button
            class="type"
            :class="{'type-selected':typeSelect===item.val}"
            v-for="(item) in preType"
            :key="item.val"
            :value="item.val"
            @click="typeSel(item.val)"
          >{{item.name}}</button>
          <div class="noType" v-if="preType.length===0">暂无可选发票种类</div>
        </div>
        <div class="form-title">身份证后4位</div>
        <fe-pwdinput
          :value="identityCard"
          :length="length"
          @focus="focus"
          :isPwd="false"
          currentColor="#1990fa"
        ></fe-pwdinput>
        <div class="form-title">{{nameConfig}}</div>
        <input type="text" class="roomNum" @input="keyup" v-model="roomNum" maxlength="8">
      </div>
      <div class="btns">
        <fe-button
          type="primary"
          :disabled="disabled"
          style="line-height:0.44rem;border-radius:0.04rem;font-size:0.18rem;"
          @click.native="submitData()"
        >下一步</fe-button>
      </div>
      <fe-keyboard
        :show="showKeyboard"
        @input="onInput"
        @delete="onDelete"
        @blur="showKeyboard = false"
        extra-key="x"
      ></fe-keyboard>
    </div>
    <p class="copyright">
      <span></span>该服务由诺诺网·极速开票提供
    </p>
  </div>
</template>

<script>
import { Button, Keyboard, Pwdinput } from "feui";
const preList = {
  X1: [{ name: "普通发票", val: 1 }, { name: "专用发票", val: 2 }],
  X2: [{ name: "普通发票", val: 1 }],
  X3: [{ name: "专用发票", val: 2 }],
  X4: []
};
export default {
  name: "jiudianhangye",
  data() {
    return {
      roomNum: "",
      typeSelect: 0,
      showKeyboard: false,
      length: 4,
      identityCard: "",
      num:
        (Object.keys(this.$route.query).length !== "" &&
          this.$route.query.num) ||
        "",
      nameConfig:
        (Object.keys(this.$route.query).length !== "" &&
          this.$route.query.nameConfig) ||
        "房间号",
      preTypeSupport:
        Object.keys(this.$route.query).length !== "" &&
        this.$route.query.preTypeSupport
    };
  },
  components: {
    [Button.name]: Button,
    [Keyboard.name]: Keyboard,
    [Pwdinput.name]: Pwdinput
  },
  created() {
    document.title = "极速开票";
    console.log(this.num);
    if (this.num) {
      this.roomNum = this.num;
    }
  },
  mounted() {
    document.querySelector("body").addEventListener("touchend", function(e) {
      if (e.target.className !== "input") {
        document.querySelector("input").blur();
      }
    });
    document.querySelector("input").addEventListener("blur", function(params) {
      setTimeout(() => {
        const scrollHeight =
          document.documentElement.scrollTop || document.body.scrollTop || 0;
        window.scrollTo(0, Math.max(scrollHeight - 1, 0));
      }, 50);
    });
  },
  computed: {
    disabled() {
      return !(this.identityCard.length === this.length && this.roomNum !== "");
    },
    roomDisabled() {
      return this.num !== "";
    },
    preType() {
      if (
        this.preTypeSupport &&
        this.preTypeSupport < 4 &&
        this.preTypeSupport > 0
      ) {
        this.typeSelect = preList["X" + this.preTypeSupport][0].val;
        return preList["X" + this.preTypeSupport];
      } else {
        return [];
      }
    }
  },
  methods: {
    // 身份证
    onInput(key) {
      if (key === "x") {
        if (this.identityCard.length === this.length - 1) {
          this.identityCard = (this.identityCard + key.toUpperCase()).slice(
            0,
            this.length
          );
        } else {
          return false;
        }
      } else {
        this.identityCard = (this.identityCard + key).slice(0, this.length);
      }
    },
    // 删除
    onDelete() {
      this.identityCard = this.identityCard.slice(
        0,
        this.identityCard.length - 1
      );
    },
    // 房间号输入框
    keyup(e) {
      this.roomNum = this.roomNum.toUpperCase();
    },
    // 类型选择
    typeSel(e) {
      this.typeSelect = e;
    },
    focus() {
      this.showKeyboard = true;
    },
    // 提交数据
    submitData() {
      const preData = {
        preType: this.typeSelect,
        identityCard: this.identityCard,
        roomNum: this.roomNum
      };

      const query = [];
      const baseUrl = "/Contents/pages/jskpNew/index.html#/index";
      for (const i in preData) {
        query.push(`${i}=${encodeURIComponent(preData[i])}`);
      }
      const url = baseUrl + "?" + query.join("&");

      // console.log(url, query);
      window.location.href = url;
    }
  }
};
</script>

<style lang='less' scoped>
@import "./../assets/common.less";

body {
  background-color: @bgColor;
}
.index {
  min-height: 100%;
  width: 100%;
}
.box {
  position: absolute;
  top: 0;
  left: 0;
  overflow: auto;
  width: 100%;
  height: 100%;
  z-index: 100;
}

.clearfix {
  display: inline-block;
}
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  line-height: 0;
  clear: both;
  visibility: hidden;
}
.nuim-password-input {
  /deep/ .nuim-password-input__security {
    height: 0.5rem;
  }
}

.nuim-type {
  .type {
    display: inline-block;
    height: 0.5rem;
    line-height: 0.5rem;
    text-align: center;
    border-radius: 0.03rem;
    border: 1px solid #e0e0e0;
    background-color: #fff;
    font-size: 0.15rem;
    margin-left: 0.35rem;
    width: 1.43rem;
    outline: none;
    &:first-child {
      margin-left: 0rem;
    }
  }
  .noType {
    font-size: 0.14rem;
    color: #cccccc;
    line-height: 0.5rem;
  }
  .type-selected {
    background: #fff
      url()
      no-repeat 100% 100%;
    border-color: #1990fa;
    border: 1px solid #1990fa;
  }
}
.form-area {
  padding: 0.24rem;
  box-sizing: border-box;
  background: #ffffff;
  .form-title {
    font-size: 0.18rem;
    color: #3c3c3c;
    line-height: 0.4rem;
    font-family: "pingfang sc";
    margin-top: 0.2rem;

    &:first-child {
      margin-top: 0;
    }
  }

  .roomNum {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 0.04rem;
    height: 0.5rem;
    outline: none;
    font-size: 0.24rem;
    width: 100%;
    text-indent: 0.1rem;
    letter-spacing: 2px;
  }
}
.btns {
  padding: 0.2rem 0.24rem 0.4rem;
  bottom: 0;
  box-sizing: border-box;
  /deep/ .weui-btn_disabled {
    background: #cccccc;
    border: none;
    color: #fff;
    &:after {
      border: 0 none;
    }
  }
}
.copyright {
  span {
    background: url()
      no-repeat;
    height: 0.12rem;
    width: 0.12rem;
    display: inline-block;
    background-size: contain;
    vertical-align: middle;
    margin-right: 0.05rempx;
  }
  margin: 0.15rem 0 0.05rem 0;
  font-size: 0.12rem;
  color: #9b9b9b;
  letter-spacing: 1px;
  text-align: center;
  width: 100%;
  margin-top: -25px;
}
</style>
